<template>
    <div>
        <el-card class="box-card">
            <el-row :gutter="2">
                <el-col :span="6" v-loading="loading">
                    <el-input placeholder="输入关键字" v-model="filterText" prefix-icon="el-icon-search"></el-input>
                    <div style="margin-top: 10px;text-align: right;padding-right: 13px;">
                        <el-button type="text" icon="el-icon-folder-add" circle @click="() => append(null)"></el-button>
                        <el-button type="text" icon="el-icon-folder-opened" circle
                                   @click="expandTree(true)"></el-button>
                        <el-button type="text" icon="el-icon-folder" circle @click="expandTree(false)"></el-button>
                    </div>
                    <div class="el-tree-div">
                        <el-tree ref="tree" :data="treeData" node-key="id" class="filter-tree" empty-text="无数据"
                                 :filter-node-method="filterNode"
                                 :expand-on-click-node="false"
                                 :default-expand-all="expandAll"
                                 highlight-current
                                 :props="defaultProps">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span><i class="el-icon-menu" :class="node.data.icon"></i>&nbsp;{{ node.label }}</span>
                            <span>
                                <el-button type="text" circle icon="el-icon-edit-outline"
                                           @click="() => editNode(node,data)"></el-button>
                                <el-button type="text" circle icon="el-icon-folder-add"
                                           @click="() => append(data)"></el-button>
                                <el-popconfirm title="确定删除吗?" style="margin-left: 10px;"
                                               @onConfirm="() => remove(node, data)">
                                       <el-button slot="reference" type="text" circle
                                                  icon="el-icon-folder-remove"></el-button>
                                </el-popconfirm>
                            </span>
                        </span>
                        </el-tree>
                    </div>
                </el-col>
                <el-col :span="18">
                    <el-form :model="menuForm" :rules="rules" ref="menuForm" label-width="100px" class="demo-menuForm">
                        <!-- <el-form-item label="父级菜单" prop="region">
                             <el-select v-model="menuForm.region" placeholder="请选择活动区域">
                                 <el-option label="区域一" value="shanghai"></el-option>
                                 <el-option label="区域二" value="beijing"></el-option>
                             </el-select>
                         </el-form-item>-->
                        <el-form-item label="菜单图标" prop="icon">
                            <el-input v-model="menuForm.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="menuForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单路劲" prop="url">
                            <el-input v-model="menuForm.url"></el-input>
                        </el-form-item>
                        <!--      <el-form-item label="是否目录" prop="delivery">
                                  <el-switch v-model="menuForm.delivery"></el-switch>
                              </el-form-item>-->
                        <el-form-item label="菜单描述" prop="description">
                            <el-input type="textarea" v-model="menuForm.description"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('menuForm')" size="small">保存</el-button>
                            <el-button @click="resetForm('menuForm')" size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    let id = 1000;
    export default {
        name: "MenuManager",
        data() {
            return {
                loading: true,
                expandAll: true,
                filterText: '',
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                menuForm: {
                    id: '',
                    parentId: '',
                    name: '',
                    icon: '',
                    url: '',
                    description: '',
                    status: '0',
                    orderIndex: '1'
                },
                rules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    icon: [
                        {required: true, message: '请输入菜单图标', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请输入菜单路径', trigger: 'blur'}
                    ]
                }
            }
        },
        computed: {},
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            //静态过滤方法
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            //编辑节点
            editNode(node, data) {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/menuInfo/single", {id: data.id}).then(res => {
                    if (res.code === 200 && res.data) {
                        this.menuForm = res.data;
                    } else {
                        this.menuForm = {};
                        this.menuForm.parentId = node.parent.data.id;
                    }
                })
            },
            //展开或者收缩所有节点
            expandTree(param) {
                this.expandAll = param;
                const nodesMap = this.$refs.tree.store.nodesMap;
                let keys = Object.keys(this.$refs.tree.store.nodesMap);
                for (let j = 0; j < keys.length; j++) {
                    nodesMap[keys[j]].expanded = this.expandAll;
                }
            },
            //添加节点
            append(data) {
                const newChild = {id: id++, icon: 'el-icon-menu', label: '新建菜单', children: []};
                if (data) {
                    if (!data.children) {
                        this.$set(data, 'children', []);
                    }
                    this.menuForm.parentId = data.id;
                    data.children.push(newChild);
                } else {
                    this.menuForm.parentId = "0";
                    this.treeData.push(newChild);
                }
            },
            //移除节点
            remove(node, data) {
                this.$httpDelete(this.$axiosBaseHttp, "api/rest/menuInfo/del/" + data.id, {}).then(res => {
                    if (res.code === 200) {
                        const parent = node.parent;
                        const children = parent.data.children || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        children.splice(index, 1);
                        this.$successMsg("删除成功");
                    } else {
                        this.$errorMsg("删除失败");
                    }
                })
            },
            //提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.menuForm.id) {
                            //修改信息
                            delete this.menuForm.addTime;
                            this.$httpPut(this.$axiosBaseHttp, "api/rest/menuInfo/upd", this.menuForm).then(res => {
                                if (res.code === 200) {
                                    this.initMenuTree("base");
                                    this.$successMsg("修改成功");
                                } else {
                                    this.$errorMsg("修改失败");
                                }
                            });
                        } else {
                            //新增信息
                            this.$httpPost(this.$axiosBaseHttp, "api/rest/menuInfo/save", this.menuForm).then(res => {
                                if (res.code === 200) {
                                    this.initMenuTree("base");
                                    this.$successMsg("新增成功");
                                    this.resetForm("menuForm");
                                } else {
                                    this.$errorMsg("新增失败");
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //初始化菜单树
            initMenuTree(sysType) {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/menuInfo/tree", {}).then(res => {
                    if (res.code === 200) {
                        this.treeData = res.data;
                        this.loading = false;
                    }
                })
            }
        },
        mounted() {
            this.initMenuTree("base");
        }
    }
</script>

<style scoped lang="scss">

    .box-card {
        height: calc(100vh - 118px);
    }

    .el-tree-div {
        overflow-y: scroll;
        margin-top: 10px;
        height: calc(100vh - 200px);
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-button.is-circle {
        border-radius: 50%;
        padding: 0px;
        font-size: 16px;
    }

    /*修改滚动条样式--start*/
    .el-tree-div::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

    .el-tree-div::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    .el-tree-div::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
    }

    .el-tree-div::-webkit-scrollbar-thumb:hover {
        background: rgba(39, 161, 255, 0.92);
    }

    .el-tree-div::-webkit-scrollbar-corner {
        background: rgba(39, 161, 255, 0.92);
    }

    /*修改滚动条样式--end*/
</style>